<template>
  <view>
    <view class="search-box">
      <uni-search-bar :radius="100" cancelButton="none" @input="input" @confirm="saveHistory" ></uni-search-bar>
    </view>
    <view class="suggest-list">
      <view class="suggest-item" v-for="(item,i) in SuggestList" :key="i">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 展示搜索历史 -->
    <view class="historyList" v-if="SuggestList.length===0">
      <view class="historyTitle">
        <text class="history-text">搜索历史</text>
        <uni-icons type="trash" @click="cleanHistory"></uni-icons>
      </view>
      <view class="historyContent">
        <uni-tag :text="item" v-for="(item, i) in historyReverse" :key="i" :inverted="true"></uni-tag>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        kw: '',
        timer: null,
        SuggestList: [],
        historyList: [],
        historyReverse: [],
        // txtValue:''
      }
    },
    onLoad() {
      this.historyReverse = uni.getStorageSync('SearchHistory')||'[]'
    },
    methods: {
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSuggestList()
        }, 500);
      },
      //获取搜索建议
      async getSuggestList() {
        if (this.kw === '') {
          this.SuggestList = []
          return
        }
        const {
          data: res
        } = await uni.$http.get('goods/qsearch', {
          query: this.kw
        })
        console.log(res);
        if (res.meta.status !== 200) return uni.$showMsg('数据请求错误')
        this.SuggestList = res.message

      },
      saveHistory() {
        this.historyList.push(this.kw)
        const set = new Set(this.historyList)
        set.delete(this.kw)
        set.add(this.kw)
        this.historyList = Array.from(set)
        this.historyReverse = [...this.historyList].reverse()
        // this.txtValue=''
        // console.log(this.txtValue);
      },
      cleanHistory(){
     
       this.historyReverse=[]
       this.historyList=[]
        // uni.setStorageSync('SearchHistory',[])
      }
    },
    watch: {
      historyReverse: {
        handler() {
          uni.setStorageSync('SearchHistory', this.historyReverse)
        }
      }
    }
  }
</script>
<style>
  .suggest-list {
    padding: 0 5px;
  }
  .suggest-item {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
  }
  .goods-name {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .historyList {
    padding: 0 6px;
  }
  .historyTitle {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
  }
  .history-text {
    font-size: 15px;
  }
  .historyContent {
    display: flex;
    flex-wrap: wrap;
  }
  uni-tag {
    padding: 10px 4px;
  }
</style>
